<template>
<div class="managementTeam">
  <el-breadcrumb separator-class="el-icon-arrow-right" class="managementTeam_title">
    <el-breadcrumb-item :to="{ path: '/backIndex/managementTeam' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>我参与的比赛</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="table_box">
    <el-table
        v-loading="loading"
        class="table_main"
        ref="filterTable"
        :data="allGame"
        border
        style="margin: 40px auto">
      <!--    -->
      <el-table-column
          label="比赛名称"
          align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gameName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="比赛级别"
          align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gamelevel }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="type"
          label="比赛方式"
          align="center"
          :filters="[{ text: '组队赛', value: '组队赛' }, { text: '个人赛', value: '个人赛' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.type === '组队赛' ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="比赛时间"
          align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.beginTime + ' ~ ' + scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
<!--          <div class="table_botton">-->
            <el-button
                type="primary"
                size="mini"
                @click="handleTeam(scope.$index, scope.row)">查看队伍</el-button>
            <el-button
                type="primary"
                size="mini"
                @click="handleWork(scope.$index, scope.row)">查看作品</el-button>
            <el-button
                v-show="!levelShow"
                type="danger"
                size="mini"
                @click="handleDelet(scope.$index, scope.row)">注销比赛</el-button>
<!--          </div>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="paginationShow.showTimes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="paginationShow.page"
        :page-sizes="[10, 20, 25, 30]"
        :page-size="paginationShow.askNumber"
        layout="sizes, prev, pager, next"
        :total="this.paginationShow.allPage">
    </el-pagination>
  </div>
</div>
</template>

<script>
// import axios from 'axios'
export default {
  name: "managementTeam",
  data() {
    return {
      allGame: [],
      publisher: '',
      levelShow: true,
      tableWith: this.levelShow?'987':'1068',
      loading: true,
      paginationShow: {
        showTimes: false,
        page: 1, //第几页
        allPage: 1, //总页数
        askNumber: 10,//请求条数
      }
    }
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.paginationShow.askNumber = val;
      this.SuperGetGames();
    },
    handleCurrentChange(val) {
      this.paginationShow.page = val;
      this.SuperGetGames();
    },
    //分页

    // 标签筛选
    filterTag(value, row) {
      return row.type === value;
    },
    handleTeam(index, row) {
      window.sessionStorage.setItem('gameID',row.gameID);
      window.sessionStorage.setItem('gameName',row.gameName);
      if(row.groupIDList){
        const groupIDList = JSON.stringify(row.groupIDList);
        window.sessionStorage.setItem('groupIDList',groupIDList);
      }
      this.$router.push('/backIndex/allTeam');
    },

    handleWork(index, row) {
      // console.log('外row',row);
      window.sessionStorage.setItem('gameID',row.gameID);
      window.sessionStorage.setItem('gameName',row.gameName);
      if(row.groupIDList){
        // console.log('里row',row);
        const groupIDList = JSON.stringify(row.groupIDList);
        window.sessionStorage.setItem('groupIDList',groupIDList);
      }
      this.$router.push('/backIndex/allwork');
    },

    // 删除
    handleDelet(index,row){
      this.$confirm('此操作将永久注销该比赛, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.deleteGame(row.gameID)
        if(res.success){
          this.allGame.splice(index,1);
          this.$message({
            type: 'success',
            message: '注销成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  // 超级管理员获取所有比赛
    async SuperGetGames() {
      this.loading = true;
      const level = window.sessionStorage.getItem('level');
      if(level === '4'){
        this.levelShow = false;
        const data = {page:this.paginationShow.page,asknumber:this.paginationShow.askNumber};
        const res = await this.$api.games(data);
        const allGame = res.data.page.records;
        this.paginationShow.allPage = res.data.page.pages*10;
        for (const temp of allGame) {
          const groupIDList = await this.$api.getGroupBygameID(temp.gameID);
          temp.groupIDList = groupIDList.groupID;
        }
        this.loading = false;
        this.allGame = allGame;
        this.paginationShow.showTimes =  true;
      }
    },

  //  老师获取比赛
    async teacherGetOwnGame(){
      const level = window.sessionStorage.getItem('level');
      if(level === "2"){
        const res = await this.$api.getOwnGameList();
        const allGame = res.data.ownGame;
        for (const temp of allGame) {
          const groupIDList = await this.$api.getGroupBygameID(temp.gameID);
          temp.groupIDList = groupIDList.groupID;
        }
        this.allGame = allGame;
      }
      this.loading = false;
    },
  //  裁判获取比赛列表
    async getGames() {
      const level = window.sessionStorage.getItem('level');
      if(level === '3'){
        const res = await this.$api.getInfoList()
        const game = await this.$api.getGamebyId(res.gameID);
        this.allGame.push(game.data.AdminName);
        this.loading = false;
        window.sessionStorage.setItem('groupIDList',JSON.stringify(res.groupID));
      }
    }
  },
mounted() {
  this.getGames();
  this.teacherGetOwnGame();
  this.SuperGetGames();
 }
}
</script>

<style lang="less" scoped>
body{
  margin: 0;
  .managementTeam{
    .managementTeam_title{
      margin-bottom: 20px;
    }
    .table_box{
      background-color: #ffff;
      padding: 40px;
      box-shadow: 0 2px 7px rgba(187, 172, 172, 0.49), 0 5px 11px rgba(247, 231, 231, 0.36);
      //.table_main{
      //  .table_botton{
      //    width: 100%;
      //    display: flex;
      //    justify-content: center;
      //  }
      //}
    }
  }
}
</style>
